<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清新番茄钟 | 专注与待办</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f0f9eb, #e3f4e1);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #2c3e50;
        }
        
        .container {
            display: flex;
            max-width: 1200px;
            width: 100%;
            background: white;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(76, 175, 80, 0.15);
        }
        
        .pomodoro-section {
            flex: 1;
            padding: 40px;
            background: linear-gradient(to bottom right, #e8f5e9, #c8e6c9);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .todo-section {
            flex: 1;
            padding: 40px;
            background: #f9fdf8;
            border-left: 1px solid #e0f2e9;
        }
        
        h1 {
            color: #2e7d32;
            margin-bottom: 10px;
            font-size: 2.2rem;
        }
        
        .subtitle {
            color: #66bb6a;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .timer-container {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: linear-gradient(145deg, #c8e6c9, #a5d6a7);
            box-shadow: 0 10px 25px rgba(76, 175, 80, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 30px 0;
            position: relative;
            border: 8px solid #e8f5e9;
        }
        
        .timer {
            font-size: 4rem;
            font-weight: 700;
            color: #1b5e20;
        }
        
        .controls {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .btn {
            padding: 14px 28px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: #4caf50;
            color: white;
            box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);
        }
        
        .btn-primary:hover {
            background: #43a047;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #e8f5e9;
            color: #2e7d32;
            border: 2px solid #a5d6a7;
        }
        
        .btn-secondary:hover {
            background: #c8e6c9;
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        .mode-selector {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .mode-btn {
            padding: 12px 24px;
            border-radius: 50px;
            border: 2px solid #a5d6a7;
            background: #f1f8e9;
            color: #2e7d32;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .mode-btn.active {
            background: #4caf50;
            color: white;
            border-color: #4caf50;
        }
        
        .mode-btn:hover:not(.active) {
            background: #c8e6c9;
        }
        
        .todo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e0f2e9;
        }
        
        .todo-header h2 {
            color: #2e7d32;
        }
        
        .todo-input {
            display: flex;
            margin-bottom: 25px;
        }
        
        .todo-input input {
            flex: 1;
            padding: 16px 20px;
            border: 2px solid #c8e6c9;
            border-radius: 50px 0 0 50px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .todo-input input:focus {
            border-color: #4caf50;
        }
        
        .todo-input button {
            padding: 16px 25px;
            border: none;
            background: #4caf50;
            color: white;
            border-radius: 0 50px 50px 0;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.3s;
        }
        
        .todo-input button:hover {
            background: #43a047;
        }
        
        .todo-list {
            list-style: none;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .todo-list::-webkit-scrollbar {
            width: 8px;
        }
        
        .todo-list::-webkit-scrollbar-track {
            background: #f1f8e9;
            border-radius: 4px;
        }
        
        .todo-list::-webkit-scrollbar-thumb {
            background: #a5d6a7;
            border-radius: 4px;
        }
        
        .todo-item {
            display: flex;
            align-items: center;
            padding: 16px;
            margin-bottom: 15px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 3px 10px rgba(139, 195, 74, 0.1);
            transition: transform 0.3s ease;
            border-left: 4px solid #a5d6a7;
        }
        
        .todo-item:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(139, 195, 74, 0.15);
        }
        
        .todo-item.completed {
            opacity: 0.7;
            border-left-color: #e0f2e9;
        }
        
        .todo-item.completed .todo-text {
            text-decoration: line-through;
            color: #90a4ae;
        }
        
        .todo-text {
            flex: 1;
            padding: 0 15px;
            font-size: 1.1rem;
        }
        
        .todo-actions {
            display: flex;
            gap: 10px;
        }
        
        .todo-actions button {
            background: none;
            border: none;
            cursor: pointer;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .todo-actions button:hover {
            background: #e8f5e9;
        }
        
        .complete-btn {
            color: #4caf50;
        }
        
        .delete-btn {
            color: #e57373;
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid #e0f2e9;
            color: #388e3c;
            font-weight: 600;
        }
        
        .stats div {
            text-align: center;
        }
        
        .stats span {
            display: block;
            font-size: 1.8rem;
            color: #2e7d32;
        }
        
        @media (max-width: 900px) {
            .container {
                flex-direction: column;
            }
            
            .pomodoro-section, .todo-section {
                padding: 30px;
            }
            
            .todo-section {
                border-left: none;
                border-top: 1px solid #e0f2e9;
            }
        }
        
        @media (max-width: 500px) {
            .timer-container {
                width: 250px;
                height: 250px;
            }
            
            .timer {
                font-size: 3.2rem;
            }
            
            .controls {
                flex-direction: column;
                width: 100%;
            }
            
            .btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 番茄钟部分 -->
        <section class="pomodoro-section">
            <h1>番茄钟</h1>
            <p class="subtitle">专注工作，高效休息</p>
            
            <div class="timer-container">
                <div class="timer" id="timer">45:00</div>
            </div>
            
            <div class="controls">
                <button class="btn btn-primary" id="start-btn">
                    <i class="fas fa-play"></i> 开始
                </button>
                <button class="btn btn-secondary" id="pause-btn" disabled>
                    <i class="fas fa-pause"></i> 暂停
                </button>
                <button class="btn btn-secondary" id="reset-btn">
                    <i class="fas fa-redo"></i> 重置
                </button>
            </div>
            
            <div class="mode-selector">
                <button class="mode-btn active" data-mode="pomodoro">工作 (45分钟)</button>
                <button class="mode-btn" data-mode="short-break">短休息 (5分钟)</button>
                <button class="mode-btn" data-mode="long-break">长休息 (25分钟)</button>
            </div>
            
            <div class="stats">
                <div>
                    <span id="completed-count">0</span>
                    已完成番茄钟
                </div>
                <div>
                    <span id="task-count">0</span>
                    剩余任务
                </div>
            </div>
        </section>
        
        <!-- 待办事项部分 -->
        <section class="todo-section">
            <div class="todo-header">
                <h2>待办事项</h2>
                <span id="date-display"></span>
            </div>
            
            <div class="todo-input">
                <input type="text" id="new-task" placeholder="添加新任务...">
                <button id="add-task-btn"><i class="fas fa-plus"></i> 添加</button>
            </div>
            
            <ul class="todo-list" id="todo-list">
                <!-- 任务将通过JS动态添加 -->
            </ul>
        </section>
    </div>

    <script>
        // 计时器变量
        let timer;
        let minutes = 45;
        let seconds = 0;
        let isRunning = false;
        let currentMode = 'pomodoro';
        let completedPomodoros = 0;
        
        // 待办事项数组
        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        
        // DOM元素
        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('start-btn');
        const pauseBtn = document.getElementById('pause-btn');
        const resetBtn = document.getElementById('reset-btn');
        const modeButtons = document.querySelectorAll('.mode-btn');
        const completedCount = document.getElementById('completed-count');
        const taskCount = document.getElementById('task-count');
        const newTaskInput = document.getElementById('new-task');
        const addTaskBtn = document.getElementById('add-task-btn');
        const todoList = document.getElementById('todo-list');
        const dateDisplay = document.getElementById('date-display');
        
        // 初始化
        function init() {
            updateTimerDisplay();
            renderTasks();
            updateStats();
            displayDate();
            
            // 事件监听器
            startBtn.addEventListener('click', startTimer);
            pauseBtn.addEventListener('click', pauseTimer);
            resetBtn.addEventListener('click', resetTimer);
            
            modeButtons.forEach(button => {
                button.addEventListener('click', () => {
                    switchMode(button.dataset.mode);
                });
            });
            
            addTaskBtn.addEventListener('click', addTask);
            newTaskInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') addTask();
            });
        }
        
        // 显示当前日期
        function displayDate() {
            const now = new Date();
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            dateDisplay.textContent = now.toLocaleDateString('zh-CN', options);
        }
        
        // 更新计时器显示
        function updateTimerDisplay() {
            timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 开始计时器
        function startTimer() {
            if (!isRunning) {
                isRunning = true;
                startBtn.disabled = true;
                pauseBtn.disabled = false;
                
                timer = setInterval(() => {
                    if (seconds === 0) {
                        if (minutes === 0) {
                            // 计时结束
                            clearInterval(timer);
                            isRunning = false;
                            timerFinished();
                            return;
                        }
                        minutes--;
                        seconds = 59;
                    } else {
                        seconds--;
                    }
                    
                    updateTimerDisplay();
                }, 1000);
            }
        }
        
        // 暂停计时器
        function pauseTimer() {
            if (isRunning) {
                clearInterval(timer);
                isRunning = false;
                startBtn.disabled = false;
                pauseBtn.disabled = true;
            }
        }
        
        // 重置计时器
        function resetTimer() {
            pauseTimer();
            setTimeBasedOnMode();
            updateTimerDisplay();
        }
        
        // 计时结束
        function timerFinished() {
            // 播放提示音
            const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
            audio.play();
            
            if (currentMode === 'pomodoro') {
                completedPomodoros++;
                completedCount.textContent = completedPomodoros;
                
                // 完成4个番茄钟后切换到长休息
                if (completedPomodoros % 4 === 0) {
                    switchMode('long-break');
                } else {
                    switchMode('short-break');
                }
            } else {
                switchMode('pomodoro');
            }
            
            startBtn.disabled = false;
            pauseBtn.disabled = true;
        }
        
        // 切换模式
        function switchMode(mode) {
            currentMode = mode;
            
            // 更新按钮状态
            modeButtons.forEach(button => {
                if (button.dataset.mode === mode) {
                    button.classList.add('active');
                } else {
                    button.classList.remove('active');
                }
            });
            
            // 重置计时器
            resetTimer();
        }
        
        // 根据当前模式设置时间
        function setTimeBasedOnMode() {
            switch (currentMode) {
                case 'pomodoro':
                    minutes = 45;
                    break;
                case 'short-break':
                    minutes = 5;
                    break;
                case 'long-break':
                    minutes = 25;
                    break;
            }
            seconds = 0;
        }
        
        // 添加新任务
        function addTask() {
            const taskText = newTaskInput.value.trim();
            if (taskText) {
                tasks.push({
                    id: Date.now(),
                    text: taskText,
                    completed: false
                });
                
                saveTasks();
                renderTasks();
                updateStats();
                
                newTaskInput.value = '';
                newTaskInput.focus();
            }
        }
        
        // 渲染任务列表
        function renderTasks() {
            todoList.innerHTML = '';
            
            if (tasks.length === 0) {
                todoList.innerHTML = '<p class="empty-tasks">没有任务，添加一个吧！</p>';
                return;
            }
            
            tasks.forEach(task => {
                const li = document.createElement('li');
                li.className = `todo-item ${task.completed ? 'completed' : ''}`;
                li.dataset.id = task.id;
                
                li.innerHTML = `
                    <div class="todo-text">${task.text}</div>
                    <div class="todo-actions">
                        <button class="complete-btn">
                            <i class="fas fa-${task.completed ? 'undo' : 'check'}"></i>
                        </button>
                        <button class="delete-btn">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                `;
                
                // 添加事件监听器
                const completeBtn = li.querySelector('.complete-btn');
                completeBtn.addEventListener('click', () => toggleTaskComplete(task.id));
                
                const deleteBtn = li.querySelector('.delete-btn');
                deleteBtn.addEventListener('click', () => deleteTask(task.id));
                
                todoList.appendChild(li);
            });
        }
        
        // 切换任务完成状态
        function toggleTaskComplete(id) {
            tasks = tasks.map(task => {
                if (task.id === id) {
                    return { ...task, completed: !task.completed };
                }
                return task;
            });
            
            saveTasks();
            renderTasks();
            updateStats();
        }
        
        // 删除任务
        function deleteTask(id) {
            tasks = tasks.filter(task => task.id !== id);
            saveTasks();
            renderTasks();
            updateStats();
        }
        
        // 保存任务到本地存储
        function saveTasks() {
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
        
        // 更新统计信息
        function updateStats() {
            const remainingTasks = tasks.filter(task => !task.completed).length;
            taskCount.textContent = remainingTasks;
        }
        
        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>